<template>
	<view class="add-device-page">
		<!-- 表单主体 -->
		<scroll-view scroll-y class="scroll-container">
			<view class="form-section">

				<!-- 表单卡片 -->
				<view class="card">
					<u-form :model="form" ref="formRef" label-width="135" label-align="left">
						<!-- 设备ID -->
						<u-form-item label="设备ID">
							<view class="" style="display: flex;align-items: center;">
								<u-input v-model="form.imei" placeholder="请输入设备ID或点击扫码" border="none" />
								<u-icon name="scan" size="26" @click="handleScan"></u-icon>
							</view>
						</u-form-item>

						<!-- 设备地址 -->
						<u-form-item label="设备地址" required>
							<!-- 	<j-picker-address @select="handleSelect">
								<view style="font-size: 30rpx;" :style="{color:selectedText?'#303133':'#c0c4cc'}">
									{{selectedText?selectedText:'请选择省市区县'}}
								</view>
							</j-picker-address> -->
							<u-input v-model="form.deviceAddr" placeholder="请输入省市区县" border="none" />
						</u-form-item>

						<!-- 设备名称 -->
						<u-form-item label="设备名称" required>
							<u-input v-model="form.deviceName" placeholder="给设备起个名字吧" border="none" />
						</u-form-item>
					</u-form>
				</view>

				<!-- 分组标题 -->
				<!-- <view class="section-title">信息备注</view> -->

				<!-- 信息备注卡片 -->
				<!-- 				<view class="card u-m-t-20">
					<u-form :model="form" label-width="180" label-align="left">
						<u-form-item label="产水量">
							<u-input v-model="form.waterOutput" placeholder="请手动填写产水量" type="number" border="none" />
						</u-form-item>

						<u-form-item label="原水TDS值">
							<u-input v-model="form.rawTDS" placeholder="请手动填写原水TDS值" type="number" border="none" />
						</u-form-item>
					</u-form>
				</view> -->

				<!-- 保存按钮 -->
				<view class="bottom-btn">
					<u-button type="primary" shape="circle" :customStyle="{
              width: '90%',
              height: '96rpx',
              background: 'linear-gradient(135deg, #2979FF, #00A8FF)',
              boxShadow: '0 12rpx 32rpx rgba(41,121,255,0.25)'
            }" @click="handleSave">
						保存
					</u-button>
				</view>
			</view>
		</scroll-view>

		<!-- 地址选择器 -->
		<u-picker mode="region" v-model="showAddressPicker" @confirm="onAddressConfirm" confirmColor="#2979FF"
			title="选择设备地址" />
	</view>
</template>

<script>
	import {
		addDeviceApi,
		deviceEditApi,
		deviceScIMEIApi,
		deviceDetailApi
	} from '@/api/index.js';
	import {
		parseUrlParams
	} from '@/utils/common.js';
	export default {
		data() {
			return {
				addressData: {
					province: '', //省
					city: '', //市
					area: '', //区
					province_adcode: '', //省adcode
					city_adcode: '', //市adcode
					area_adcode: '', //区adcode
				},
				selectedText: '',
				showAddressPicker: true,
				form: {
					imei: '',
					deviceAddr: '',
					deviceName: '',
					// waterOutput: '',
					// rawTDS: ''
				}
			}
		},
		onLoad(options) {
			console.log(options, 'options');
			// if (options.IMEI) {
			// 	this.form.imei = options.IMEI;
			// }
			if (options.deviceId) {
				this.form.deviceId = options.deviceId;
				this.deviceDetail(options.deviceId);
				// 在页面的onLoad或按钮事件中调用
				uni.setNavigationBarTitle({
					title: '修改设备', // 新标题
				});
			}
		},
		methods: {
			// 设备详情
			async deviceDetail(deviceId) {
				const res = await deviceDetailApi(deviceId);
				console.log(res, 'res-设备详情');
				if (res.code === 200) {
					this.form.imei = res.data.imei;
					this.form.deviceAddr = res.data.deviceAddr;
					this.form.deviceName = res.data.deviceName;
				}
			},
			handleSelect(addressData, selectedText) {
				this.addressData = addressData;
				this.selectedText = selectedText
			},
			handleScan() {
				uni.scanCode({
					success: (res) => {
						console.log('扫码结果：', res);
						if (res.errMsg === 'scanCode:ok') {
							const params = parseUrlParams(res.result);
							console.log(params);
							if (params.IMEI) {
								this.form.imei = params.IMEI;
								// deviceScIMEIApi(params.IMEI).then(resp => {
								// 	console.log(resp);
								// 	if (resp.code === 200) {
								// 		uni.showToast({
								// 			title: resp.msg,
								// 			icon: 'none'
								// 		})
								// 	}
								// })
							}
						} else {
							uni.showToast({
								title: '请稍后重试',
								icon: 'none'
							})
						}

					}
				});
			},
			async handleSave() {
				if (!this.form.deviceName || !this.form.deviceAddr) {
					return uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					})
				}
				const params = {
					...this.form,
					// deviceAddr: this.addressData.province + this.addressData.city + this.addressData.area
				}
				console.log(params, 'params');
				const api = params.deviceId ? deviceEditApi : addDeviceApi;
				const text = params.deviceId ? '设备修改成功' : '设备新增成功';
				const res = await api(params);
				console.log(res, 'res');
				console.log('提交数据：', this.form)
				if (res.code === 200) {
					uni.showToast({
						title: text,
						icon: 'success'
					})
					if (!params.deviceId) {
						this.form = {
							imei: '',
							deviceAddr: '',
							deviceName: '',
							// waterOutput: '',
							// rawTDS: ''
						}
					}
				}
			},
			resetData() {
				this.form = {
					imei: '',
					// address: '',
					deviceName: '',
					// waterOutput: '',
					// rawTDS: ''
				}
				this.addressData = {
					province: '', //省
					city: '', //市
					area: '', //区
					province_adcode: '', //省adcode
					city_adcode: '', //市adcode
					area_adcode: '', //区adcode
				}
				this.selectedText = '';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.add-device-page {
		background-color: #f7f8fa;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.scroll-container {
		flex: 1;
		padding: 30rpx 30rpx 120rpx;
	}

	/* 通用卡片 */
	.card {
		background-color: #fff;
		border-radius: 24rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.04);
		padding: 24rpx 20rpx;
		margin-bottom: 30rpx;
		transition: all 0.3s ease;
	}

	// .card:active {
	// 	transform: scale(0.99);
	// 	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.06);
	// }

	/* 标题区 */
	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #111;
		margin: 20rpx 0;
		padding-left: 8rpx;
		border-left: 6rpx solid #2979ff;
	}

	/* 底部按钮 */
	.bottom-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 60rpx;
	}

	/* u-form 优化 */
	::v-deep .u-form-item {
		border-bottom: 1rpx solid #f2f3f5;
		padding: 20rpx 0;
	}

	::v-deep .u-form-item:last-child {
		border-bottom: none;
	}

	::v-deep .u-input {
		font-size: 28rpx;
		color: #111;
	}

	::v-deep .u-input__placeholder {
		color: #aaa;
	}

	/* 顶级UI风格小细节 */
	::v-deep .u-navbar__title {
		font-weight: 600;
		font-size: 34rpx;
	}
</style>